<template>
  <Transition name="pAction">
    <div class="popupsWraper" v-if="popupsShow">
      <div class="top">
        <p>{{ title }}</p>
        <i class="iconfont icon-guanbi" @click="popupsIsShow()"></i>
      </div>
      <div class="centent">
        <myNewCard />
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { } from 'vue'
import { storeToRefs } from 'pinia';

import { useMainStore } from '../store';

import myNewCard from './NewCard.vue';

const mainStore = useMainStore()
const { popupsShow } = storeToRefs(mainStore)
const { upPopups } = mainStore

// 接收信息
const { title } = defineProps({
  title: {
    default: '标题'
  }
})

// 关闭弹出层
const popupsIsShow = () => {
  upPopups()
}

</script>

<style lang="scss" scoped>
.pAction {
  &-enter {
    &-from {
      transform: translateX(300px);
    }

    &-active {
      transition: .4s ease-in;
    }

    &-to {
      transform: translateX(0);
    }
  }

  &-leave {
    &-from {
      transform: translateX(0);
    }

    &-active {
      transition: .4s ease-out;
    }

    &-to {
      transform: translateX(300px);
    }
  }

}

.popupsWraper {
  width: 300px;
  height: 100%;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 998;
  backdrop-filter: blud(80px);
  position: fixed;
  top: 50px;
  right: 0;

  .top {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid orange;

    p {
      font-size: 20px;
      color: rgb(9, 9, 9);
      font-family: '楷体';
      font-weight: 800;
    }

    i {
      font-size: 20px;
      color: rgb(133, 144, 143);
      cursor: pointer;
    }
  }

  .centent {
    width: 100%;
    height: 598px;
    overflow-y: auto;
    padding: 5px;
    box-sizing: border-box;
  }

}
</style>